<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <script src="static/js/jquery-2.1.0.js"></script>
    <script>
        $(function(){
            $("#addBtn").click(function(){
                location.href="add.html";
            });


            $("#updateBtn").click(function(){
                //得到用户选中的checkbox
                //input[type='checkbox'] 所有复选框
                //得到复选框:checked
                var $ck = $("input[type='checkbox']:checked");
                if ($ck.length==0){
                    alert('您还没有选中任何记录');
                    return;
                }
                if($ck.length>1){
                    alert('只能选中一条记录');
                    return;
                }
                //得到选择的这条记录的id
                var id = $($ck[0]).attr("id");
                console.log(id);

               location.href="toUpdate/"+id;
            });

            $("#del").click(function(){
                var $ck = $("input[type='checkbox']:checked");
                if ($ck.length==0){
                    alert('您还没有选中任何记录');
                    return;
                }
                var ids = new Array(); //id=[1,2,3]
                for(var i=0;i<$ck.length;i++){
                    ids.push($($ck[i]).attr("id"));
                }
                //
                $.ajax({
                    url:"/del",
                    type:"POST",//  @RequestBody  json数组  List
                    dataType:"json",
                    data:JSON.stringify(ids),
                    contentType:"application/json",
                    success:function(r){
                        //服务端删除成功后  页面把这几行移除
                        if(r.code==0){//删除成功
                            //移除这几行
                            for(var i=0;i<$ck.length;i++){
                               $($ck[i]).parent().parent().remove();
                            }
                        }
                    }
                });


            });

            $.ajax({
                url:"/findAll",
                dataType:"json",
                success:function(r){
                    //json
                    console.log(r);
                    //each() for
                    var $tbody = $("table tbody");
                    for(var i = 0;i<r.length;i++){
                        //怎么通过jquery构建一个<tr>
                        var $tr = $("<tr>");

                        var $checkbox = $("<td>");
                        var $idTd = $("<td>");
                        var $titleTd = $("<td>");
                        var $priceTd = $("<td>");
                        var $idNum = $("<td>");
                        var $idCreated = $("<td>");
                        $checkbox.html("<input type='checkbox' id='"+r[i].id+"'>");
                        $idTd.html(r[i].id);
                        $titleTd.html(r[i].title);
                        $priceTd.html(r[i].price);
                        $idNum.html(r[i].num);
                        $idCreated.html(r[i].created);

                        $tr.append($checkbox).append($idTd).append($titleTd)
                            .append($priceTd).append($idNum)
                            .append($idCreated);

                        $tbody.append($tr);
                    }
                }
            });
        });
    </script>
</head>
<body>
    <button id="addBtn" class="btn btn-success">
        新增
    </button>
    <button id="updateBtn" class="btn btn-warning">
        修改
    </button>
    <button id="del" class="btn btn-danger">
        删除
    </button>
    <table class="table table-bordered table-striped table-hover">
        <tr>
            <td>选项</td>
            <td>编号</td>
            <td>名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>上架时间</td>
        </tr>
        <tbody>

        </tbody>
    </table>
</body>
</html>